/*

    限时优惠


 */


/* 头部 */
.head {
  //width: 100%;
  width: 3.325rem;
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  height: 0.5rem;
  background-color: #fff;
  z-index: 999;

  span {
    position: absolute;
    top: 0.15rem;
    left: 0;
  }

  .title-img {
    width: 1.1rem;
    margin: 0 auto;
    padding-top: 0.15rem;

    a {
      display: block;
      width: 100%;
      height: 100%;

      img {
        display: block;
        width: 100%;
      }
    }
  }

  &::after {
    content: "";
    position: absolute;
    top: 0;
    left: -0.21rem;
    width: 0.22rem;
    height: 100%;
    background-color: #fff;
    z-index: 9999;
  }

  &::before {
    content: "";
    position: absolute;
    top: 0;
    right: -0.21rem;
    width: 0.22rem;
    height: 100%;
    background-color: #fff;
    z-index: 9999;
  }
}


.op-dv {
  width: 100%;
  position: fixed;
  left: 0;
  top: 0.5rem;
  z-index: 99;
  box-shadow: 0 -6px 20px rgba(0, 0, 0, .1);

  /* 选项 */

  .sel-tab {
    margin-top: 0 !important;
    width: 100%;
    position: relative;
    z-index: 99;
    background-color: #fff;


    li {
      width: 33.33%;
      text-align: center;
      left: 0.445rem;
      height: 0.445rem;
      line-height: 0.445rem;
      font-size: 14px;
      color: #322a2a;
      float: left;

      i {
        margin-left: 6px;
      }

      &.sel-active {
        color: #ff3b3b;
      }
    }
  }

  /* 显示项 */

  .cont-nav {
    position: relative;
    z-index: 99;
    background-color: #fff;

    li {
      border-top: 1px solid #eaeaea;
      padding-top: 0.055rem;
      padding-bottom: 0.14rem;

      p {
        font-size: 11px;
        color: #666;
        margin-left: 0.19rem;
        margin-bottom: 0.12rem !important;
      }

      .sel-opt-box {
        display: flex;
        justify-content: space-between;
        flex-flow: row wrap;
        padding-left: 0.2rem;
        padding-right: 0.2rem;

        a {
          flex: 0 0 33.33%;
          font-size: 13px;
          color: #333;
          text-align: center;
          margin-bottom: 0.15rem;
        }
      }

      .sel-opt-box4 {
        a{
          flex: 0 0 25%;
        }
      }
    }
  }

  /* 遮罩 */

  .mask {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0.945rem;
    left: 0;
    background-color: rgba(0, 0, 0, .5);
    z-index: 55;
  }
}


.content-box {
  margin-top: 1.1rem;
  /* 顶部图片 */

  .top-img {
    margin-bottom: 0.15rem;

    a {
      display: block;
      width: 100%;
      height: 100%;

      img {
        display: block;
        width: 100%;
      }
    }
  }

  /* 热门项目 */

  .hot {
    /* 标题 */

    .hot-title {
      border-bottom: 1px solid #e1dede;
      //padding-bottom: 0.15rem;
      li {
        display: inline-block;
        border-bottom: 2px solid #fe1818;
        padding-bottom: 0.15rem;
      }
    }

    /* 内容 */

    .hot-cont {
      li {
        padding-top: 0.15rem;
        padding-bottom: 0.135rem;
        border-bottom: 1px solid #e1dede;
        position: relative;
        //display: flex;
        //justify-content: space-between;

        img {
          height: 1.055rem;
          display: inline-block;
          margin-right: 0.07rem;
          vertical-align: middle;
        }

        .r-cont {
          display: inline-block;
          vertical-align: middle;
          //font-size: 0;

          h2 {
            font-size: 15px;
            color: #333;
            display: inline-block;
            margin-right: 0.05rem;
            margin-bottom: 0.15rem;
          }

          span {
            font-size: 0.11rem;
            color: #fd8815;
            padding: 0.02rem 0.03rem;
            border-radius: 15px;
            border: solid 1px #ff9126;
            margin-right: 0.05rem;
          }

          p {
            font-size: 12px;
            line-height: 12px;

            &:nth-of-type(1) {
              color: #999;
            }

            &:nth-of-type(2) {
              img {
                vertical-align: middle;
                width: 12px;
                height: 12px;
                margin-right: 7px;
              }

              i {
                color: #333;
                vertical-align: middle;
              }
            }

            &:nth-of-type(3) {
              color: #ff5050;
            }
          }

          a {
            display: inline-block;
            padding: 0.065rem 0.15rem;
            color: #fff;
            font-size: 12px;
            background-image: linear-gradient(207deg,
            #ff4b33 0%,
            #ff4431 0%,
            #ff3d2e 0%,
            #ff2922 54%,
            #fe1818 100%),
            linear-gradient(
                    #f65353,
                    #f65353);
            background-blend-mode: normal,
            normal;
            box-shadow: 2px 2px 9px 0px rgba(218, 20, 20, 0.33),
            inset 0px 3px 7px 0px rgba(255, 88, 75, 0.44);
            border-radius: 25px;
            position: absolute;
            bottom: 0.19rem;
            right: 0.2rem;
          }
        }
      }
    }

    .load-more {
      display: block;
      font-size: 12px;
      color: #424242;
      padding: 0.17rem 0;
      text-align: center;
    }
  }
}

footer {
  position: relative;
  left: 0;
}

